<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="admin/shared/meta :: copymeta"></head>
<!--主题内容-->
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 系统管理 <span class="c-gray en">&gt;</span> 角色列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
    <div class="text-c" style="text-align: left">
        <button onclick="removeIframe()" class="btn btn-secondary-outline radius">关闭选项卡</button>
       <!-- <span class="select-box inline">-->
        <input type="text" name="name" id="name" placeholder=" 角色名称" style="width:250px" class="input-text">
        <button name="" id="SelectServer" class="btn btn-success" type="submit"><i class="Hui-iconfont">&#xe665;</i> 搜角色</button>
    </div>
    <div class="cl pd-5 bg-1 bk-gray mt-20"> <span class="l">
        <a href="javascript:;" onclick="datadel()" class="btn btn-danger-outline radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>
        <a class="btn btn-secondary-outline radius" data-title="添加菜单" data-href="article-add.html" onclick="article_add(0)" href="javascript:;"><i class="Hui-iconfont">&#xe600;</i> 添加菜单</a></span> <span class="r">共有数据：<strong id="num"></strong> 条</span> </div>
    <div class="mt-20">
        <table class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
            <thead>
            <tr class="text-c">
                <th><input type="checkbox" name="" value=""></th>
                <th>ID</th>
                <th>菜单名称</th>
                <th>添加时间</th>
                <th>操作</th>
            </tr>
            </thead>
        </table>
    </div>
</div>
<!--_footer 作为公共模版分离出去-->
<footer th:include="admin/shared/footer :: copyfooter"></footer>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js" th:src="@{/hui/lib/My97DatePicker/4.8/WdatePicker.js}"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js" th:src="@{/hui/lib/laypage/1.2/laypage.js}"></script>
<!--表格控件-->
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js" th:src="@{/hui/lib/datatables/1.10.0/jquery.dataTables.min.js}"></script>

<script type="text/javascript" th:inline="javascript">
    $(function () {

        //提示信息  初始化设置 一般不需要改
        var lang = {
            "sProcessing": "处理中...",
            "sLengthMenu": "每页 _MENU_ 项",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
            "sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页",
                "sJump": "跳转"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        };


        //重要修改 表格内容的自定义，需要根据业务定制
        var table = $(".table-sort").dataTable({
            language:lang,  //提示信息
            autoWidth: false,  //禁用自动调整列宽
            stripeClasses: ["odd", "even"],  //为奇偶行加上样式，兼容不支持CSS伪类的场合
            processing: true,  //隐藏加载提示,自行处理
            serverSide: true,  //启用服务器端分页
            searching: false,  //禁用原生搜索
            orderMulti: true,  //启用多列排序
            ordering:false,//使用排序
            bStateSave:true,//记录cookie
            order: [],  //取消默认排序查询,否则复选框一列会出现小箭头
            renderer: "bootstrap",  //渲染样式：Bootstrap和jquery-ui
            pagingType: "simple_numbers",  //分页样式：simple,simple_numbers,full,full_numbers
            ajax: function (data, callback, settings) {

                //封装请求参数
                var param = {};
                param.pageSize= data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
                param.startIndex = data.start;//开始的记录序号
                param.pageIndex = (data.start / data.length);//当前页码
                //自定义的参数
                param.name=$("input[name='name']").val();//获取要筛选的名字
                //获取排序的参数
                /*console.log(data.order);
                param.order=data.order;*/
                //ajax请求数据方法
                $.ajax({
                    type: "GET",
                    url: "/admin_role_query",//url请求的地址
                    cache: false,  //禁用缓存
                    data: param,  //传入组装的参数
                    dataType: "json",
                    success: function (result) {

                        //封装返回数据重要
                        var returnData = {};
                        //这里直接自行返回了draw计数器,应该由后台返回
                        returnData.draw = data.draw;
                        //返回数据全部记录
                        returnData.recordsTotal = result.totalCount;
                        //后台不实现过滤功能，每次查询均视作全部结果
                        returnData.recordsFiltered = result.totalCount;
                        //返回的数据列表
                        returnData.data = result.data;
                        $("#num").text(result.totalCount);
                        //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
                        //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                        callback(returnData);
                    }
                });
            },
            //列表表头字段
            columns: [
                {
                    "sClass": "text-c",
                    "render": function (data, type, full, meta) {
                        return '<input type="checkbox" class="checkchild"/>';
                    },
                    "bSortable": false
                },
                { "data": "id","sClass": "text-c"},
                { "data": "name","sClass": "text-c" },
                { "data": "addtime" ,"sClass": "text-c"},
                { "data": null ,"sClass": "text-c","defaultContent": "<button>Edit</button>"
                    ,"render": function ( data, type, full, meta ) {
                    return '<a   href="javascript:article_add('+data.id+')">编辑</a>';
                },},
            ],
            //新建列的 数据内容
            "createdRow": function ( row, data, index ) {
                //行渲染回调,在这里可以对该行dom元素进行任何操作
                var $btn='<a style="text-decoration:none" class="ml-5" onClick="article_del(this,"10001")" href="javascript:;" title="删除"><i class="Hui-iconfont">&#xe6e2;</i></a>'
                $('td', row).eq(4).append($btn);
            }
        }).api();
        //此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象


        //查询按钮
        $("#SelectServer").click(function(){
            table.ajax.reload();
        });
    });

    
    /*资讯-添加*/
    function article_add(num){
        var index = layer.open({
            type: 2,
            title: "添加角色",
            content: "/admin_role_add?id="+num,
            area: ['500px', '300px']
        });
        //layer.full(index);
    }
    /*资讯-编辑*/
    function article_edit(title,url,id,w,h){
        var index = layer.open({
            type: 2,
            title: title,
            content: url
        });
        layer.full(index);
    }
    /*资讯-删除*/
    function article_del(obj,id){
        layer.confirm('确认要删除吗？',function(index){
            $.ajax({
                type: 'POST',
                url: '',
                dataType: 'json',
                success: function(data){
                    $(obj).parents("tr").remove();
                    layer.msg('已删除!',{icon:1,time:1000});
                },
                error:function(data) {
                    console.log(data.msg);
                },
            });
        });
    }

</script>
</body>
</html>